<div class="row">
    <div class="col-12">
        <div id="OuMembersTable">
            <!--<Primeng-TurboTable-Start>-->
            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading" [hidden]="!organizationUnit">
                <p-table #dataTable (onLazyLoad)="getStores($event)" [value]="primengTableHelper.records" [rows]="primengTableHelper.defaultRecordsCountPerPage"
                    [paginator]="false" [lazy]="true" [responsive]="primengTableHelper.isResponsive">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width:15%">{{l('detail')}}</th>
                            <th pSortableColumn="displayName">
                                {{l('Name')}}
                                <p-sortIcon field="displayName"></p-sortIcon>
                            </th>
                            <th pSortableColumn="outerId">
                                {{l('storeOuterId')}}
                                <p-sortIcon field="outerId"></p-sortIcon>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record="$implicit">
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-primary" (click)="goDetail(record)">
                                        {{l("detail")}}
                                    </button>
                                </div>
                            </td>
                            <td>
                                <span>{{record.displayName}}</span>
                            </td>
                            <td>
                                <span>{{record.outerId}}</span>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
                <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                    {{'NoData' | localize}}
                </div>
                <div class="primeng-paging-container">
                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator (onPageChange)="getStores($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                    </p-paginator>
                    <span class="total-records-count">
                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                    </span>
                </div>
            </div>
            <!--<Primeng-TurboTable-End>-->
        </div>
    </div>
</div>

<div *ngIf="!organizationUnit" class="text-muted">
    {{"SelectAnOrganizationUnitToSeeStores" | localize}}
</div>